import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom'
import $ from 'jquery'
import u from '../../common.js'
import Pop from '../tero/popup.jsx'
import Loading from "./../loading"//加载中样式
import { Layout, Menu, Icon, Button, Dropdown, Modal, Input, Radio, Select } from 'antd';

import '../../static/systemSetup/system-index.styl'
const RadioGroup = Radio.Group;
const Option = Select.Option;

export default class SystemIndex extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title:'',
      bianJi: false,
      itemId: null,
      arr: [],
      arrOption: [],
      visible: false,
      index: null,
      oldTitle: '', // 回显的title
      oldGroupName: '', // 回显的内容
    }
  }
  componentDidMount () {
      this.onList()
  }

  onList () {
    u.keyWord({
      'page':1,
      'size':100	
    },data =>{

      let date = data.data
      if (data.statusCode === 200) {
        this.setState({
          arrOption: data.data
        },() =>{
          u.read(data =>{
            date.forEach(item => {
              data.filter(item2 => {
                return item.id == item2.key_words_id? item2.key_group_name = item.key_group_name : ''
              })
            });
            if(data){
   
              this.setState((prevState) =>({
                arr: data
              }))
            }
          })
        })
      }
    })
  }


  // 鼠标悬停事件
  onSelect (item,index) {
    this.setState((prevState) =>({
      itemId: item.id,
      index: index,
      oldTitle: item.home_page_module_name,
      oldGroupName: item.key_group_name
    }))
  }

  onDelete() {
    u.delete({
      ids: [this.state.itemId]
    },data =>{
    })
    let arry = this.state.arr.filter(el => el.id != this.state.itemId)
    this.setState((prevState) => ({
      arr: arry
    }))
  }

  // 编辑
  onUpdate() {
    setTimeout(()=>{
      $('.nn').val(this.state.oldTitle)
      $('.ant-select-selection-selected-value').text(this.state.oldGroupName)

    },50)
    this.setState({
      visible: true
    })
    this.setState({
      bianJi: true
    })
  }

  // input 输入东西时赋值
  onTitle(e) {
    let title = $(e.target).val()
    this.setState((prevState) => ({
      title: title
    }))
  }

  onOption(e) {
    this.setState((prevState) => ({
      keyWordsId: e
    }))
  }


  //弹出框
  addIndex = () => {
    this.setState({
      visible: true,
    });
  }
  //点击确定
  handleOk = (e) => {

    if ($('.nn').val().trim() === '' || $('.ant-select-selection-selected-value').text() === '请选择') {
      return
    }
    // if ($('.ant-select-selection-selected-value').text() === '请选择') {
    //   console.log(2222222222)
    // }
    // 编辑
    if (this.state.bianJi === true) {
      u.update({
        "id": this.state.itemId,
        "homePageModuleName": this.state.title,
        "keyWordsId": this.state.keyWordsId
      },data =>{
        let arry = this.state.arr.slice(0)
        arry[this.state.index].home_page_module_name=this.state.title
        this.setState((prevState) => ({
        arr: arry
      }))
      })
    }
    else {
      u.create({
        "homePageModuleName": this.state.title,
        "keyWordsId": this.state.keyWordsId
      },data =>{
      
        let params ={
          id: data.id,
          home_page_module_name: this.state.title,
          key_words_id: this.state.keyWordsId
        }
        this.state.arrOption.some(el => el.id == this.state.keyWordsId ? params.key_group_name = el.key_group_name : '')
        let array = this.state.arr.slice(0)
        array.unshift(params)
        this.setState((prevState) => ({
          arr: array
        }))
      })
    }
    this.onList()
    this.setState({
      visible: false,
      bianJi: false
    });
    $('.nn').val('')
    $('.ant-select-selection-selected-value').text('请选择')
  }

  //点击取消
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }
  //单选框
  onChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  }

  handleMenuClick(e) {
  }

  render() {
    const menu = (
      <Menu className="tm-tips" onClick={this.handleMenuClick}>
        <Menu.Item>
          <a href="javascript:;" onClick={() => {this.onUpdate()}}>编辑</a>
        </Menu.Item>
        <Menu.Item>
          <a href="javascript:;" onClick={() => {this.onDelete()}}>删除</a>
        </Menu.Item>
      </Menu>
    );
    return (

      <div className="indexContainer">
        <Loading className="loadingPage" />
        <ul className="firstUl">
          <li className="dashBox">
            <img src={require("../../static/image/addPlus.png")} style={{ marginBottom: "7%", marginTop: "3%" }} onClick={this.addIndex} />
            <Modal
              title={<span>
                <span>添加首页模块</span></span>}
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              footer={[
                <Button onClick={this.handleCancel}>
                  取 消
                </Button>,
                <Button onClick={this.handleOk} type="primary">
                  确 定
                </Button>,
              ]}
            >
              <div className="addRow">
                <div className="label">
                  <span>首页模块名称:</span>
                </div>
              <Input placeholder="请输入模块名称" style={{ width: "60%" }} size="default"  onChange={(e) => {this.onTitle(e)}} className='nn'/>
              </div>
              <div className="addRow">
                <div className="label">
                  <span>模块检测范围:</span>
                </div>
                <Select defaultValue="请选择" style={{ width: "60%" }} onChange={(e) => {this.onOption(e)}} className="cc">
                {
                  this.state.arrOption.map((item) => {
                    return (
                      <Option value={item.id} key={item.id}>{item.key_group_name}</Option>
                    )
                  })
                }
                </Select>
              </div>
              {/* <div className="addRow">
                <div className="label">
                  <span>类型:</span>
                </div>
                <RadioGroup onChange={this.onChange} value={this.state.value}>
                  <Radio value={1}>情报</Radio>
                  <Radio value={2}>案件</Radio>
                  <Radio value={3}>舆情</Radio>
                </RadioGroup>
              </div> */}
            </Modal>
            <p>新增产品</p>
          </li>
          {
            this.state.arr.map((item,index) => {
              return (<li key={index}>
                <div className="ulTop">
                  <h3 style={{ color: "#30383e", fontSize: "16px" }}>{item.home_page_module_name}</h3>
                  <div className="topic-more" onMouseOver={() => {this.onSelect(item,index)}}>
                    <Dropdown overlay={menu} key={index} placement="bottomCenter">
                      <a className="ant-dropdown-link" href="javascript:;">
                        <Icon type="ellipsis" style={{ fontWeight: "bolder", color: "#61707e" }} />
                      </a>
                    </Dropdown>
                  </div>
                </div>
                <p>{ item.key_group_name }</p>
              </li>
              )
            })
          }

        </ul>
      </div>
    );
  }
}